<template>
  <div id="app">
    <navigation>
      <router-view/>
    </navigation>
  </div>
</template>

<script>
export default {
  name: 'App',
  created () {
    // bind event
    this.$navigation.on('forward', (to, from) => {
      console.log('forward to', to, 'from ', from)
    })
    this.$navigation.on('back', (to, from) => {
      console.log('back to', to, 'from ', from)
    })
    this.$navigation.on('replace', (to, from) => {
      console.log('replace to', to, 'from ', from)
    })
    this.$navigation.on('refresh', (to, from) => {
      console.log('refresh to', to, 'from ', from)
    })
    this.$navigation.on('reset', () => {
      console.log('reset')
    })
    // and use [once, off] methods
    this.$navigation.once('forward', () => {
      console.log('appear once')
    })
    const off = () => {
      console.log('will not appear')
    }
    this.$navigation.on('forward', off)
    this.$navigation.off('forward', off)
  }
}
</script>

<style>
@import './assets/css/base.css';
.fade-enter-active, .fade-leave-active {
  transition: opacity .25s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>
